<template>
  <div>
    <div class="container">
      <img src="../assets/images/404.jpg" alt="" />
      <p class="sorry">咦~页面不见了~</p>
      <p class="goto"><router-link to="/home">返回首页 </router-link></p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    A() {
      document.parentElement();
    },
  },
};
</script>

<style scoped>
.container {
  width: 600px;
  height: 400px;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 20%);
}
.container img {
  margin: 0 auto;
  display: block;
  width: 400px;
  height: 400px;
}
.sorry {
  font-size: 30px;
  /* align-items: center; */
  text-align: center;
  margin-top: 20px;
}
.goto {
  font-size: 30px;
  /* align-items: center; */
  text-align: center;
  margin-top: 20px;
}
.goto:hover {
  color: aqua;
}
</style>